<!DOCTYPE html>
<html lang="en">

<head>
	<script src="/js/jquery-1.11.3.min.js"></script>
	<script src="/js/Vue.js"></script>
	<script src="https://unpkg.com/http-vue-loader"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/css/backstage.css">
	<meta charset="UTF-8">
	<title>Hello!</title>
</head>

<body>
	<div id="app">
		<el-container style="height: 100%; border: 1px solid #eee">
			<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
				<el-menu :default-openeds="['1', '3']">
					<el-menu-item index="1-1" @click="itemIndex='1'">专辑</el-menu-item>
					<el-menu-item index="1-2" @click="itemIndex='2'">分类</el-menu-item>
					<el-menu-item index="1-3" @click="itemIndex='3'">组合</el-menu-item>
					<el-menu-item index="1-4" @click="itemIndex='4'">评论</el-menu-item>
					<el-menu-item index="1-5" @click="itemIndex='5'">歌词</el-menu-item>
					<el-menu-item index="1-6" @click="itemIndex='6'">Mv</el-menu-item>
					<el-menu-item index="1-7" @click="itemIndex='7'">图片</el-menu-item>
					<el-menu-item index="1-8" @click="itemIndex='8'">角色</el-menu-item>
					<el-menu-item index="1-9" @click="itemIndex='9'">歌手</el-menu-item>
					<el-menu-item index="1-10" @click="itemIndex='10'">歌曲</el-menu-item>
					<el-menu-item index="1-11" @click="itemIndex='11'">歌单</el-menu-item>
					<el-menu-item index="1-12" @click="itemIndex='12'">用户</el-menu-item>
				</el-menu>
			</el-aside>

			<el-container>
				<el-header style="text-align: right; font-size: 12px">
					<span>王小虎</span>
					<el-dropdown>
						<i class="el-icon-setting" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item><a href="/toLogin">注销</a></el-dropdown-item>
							<el-dropdown-item><a href="/frontHomePage" target="_blank">客户端</a></el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-header>
				<album-list v-if="itemIndex=='1'"></album-list>
				<classification-list v-if="itemIndex=='2'"></classification-list>
				<combination-list v-if="itemIndex=='3'"></combination-list>
				<comment-list v-if="itemIndex=='4'"></comment-list>
				<lyrics-list v-if="itemIndex=='5'"></lyrics-list>
				<mv-list v-if="itemIndex=='6'"></mv-list>
				<picture-list v-if="itemIndex=='7'"></picture-list>
				<role-list v-if="itemIndex=='8'"></role-list>
				<singer-list v-if="itemIndex=='9'"></singer-list>
				<song-list v-if="itemIndex=='10'"></song-list>
				<songlist-list v-if="itemIndex=='11'"></songlist-list>
				<user-list v-if="itemIndex=='12'"></user-list>
			</el-container>
		</el-container>
	</div>
</body>
<style>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}

	a{
		text-decoration: none;
	}
</style>

<script type="module">
	var page = [[${page}]];
	console.log(page);
	var app = new Vue({
	el: '#app',
	data: {
		itemIndex:page,
	},
    components: { 
        'album-list': httpVueLoader('./vue/listAlbum.vue') ,
        'classification-list': httpVueLoader('./vue/listClassification.vue') ,
        'combination-list': httpVueLoader('./vue/listCombination.vue') ,
        'comment-list': httpVueLoader('./vue/listComment.vue') ,
        'lyrics-list': httpVueLoader('./vue/listLyrics.vue') ,
        'mv-list': httpVueLoader('./vue/listMv.vue') ,
        'picture-list': httpVueLoader('./vue/listPicture.vue') ,
        'role-list': httpVueLoader('./vue/listRole.vue') ,
        'singer-list': httpVueLoader('./vue/listSinger.vue') ,
        'song-list': httpVueLoader('./vue/listSong.vue') ,
        'songlist-list': httpVueLoader('./vue/listSonglist.vue') ,
        'user-list': httpVueLoader('./vue/listUser.vue') ,
    }
})
</script>

</html>